<!--
 * User: willie
 * Date: 2020/5/27
 * Time: 9:52
-->
<template>
  <div>
    <el-container>
      <el-main>
        <div class="container flow-container" :style="outHeight">
          <el-scrollbar>
            <div class="super-flow-base-demo">
              <super-flow
                ref="superFlow"
                :node-list="nodeList"
                :link-list="linkList"
                :link-style="linkStyle"
              >
              </super-flow>
            </div>
          </el-scrollbar>
          <el-steps
            direction="vertical"
            :active="1"
            process-status="finish"
            finish-status="success"
          >
            <el-step title="Step 1">
              <template #description>
                <el-card>
                  <h4>Update Github template</h4>
                  <p>Tom committed 2018/4/12 20:46</p>
                </el-card></template
              >
            </el-step>
            <el-step title="Step 2" />
            <el-step title="Step 3" />
          </el-steps>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
let windowHeight = parseInt(window.innerHeight);
export default {
  data() {
    return {
      nodeList: [],
      linkList: [],
      autoHeight: {},
      outHeight: {
        height: "",
      },
    };
  },
  created() {
    const nodeList = [
      {
        id: "nodeS3WgFnzCI15X58Qw",
        width: 50,
        height: 50,
        coordinate: [-665, -133],
        meta: {
          prop: "start",
          name: "开始",
        },
      },
      {
        id: "nodefHsy9uJObPtdHZv1",
        width: 160,
        height: 80,
        coordinate: [-200, -148],
        meta: {
          prop: "completed",
          name: "审批节点",
          desc: "111111",
        },
      },
      {
        id: "nodeni9QOqT3mI7hsMau",
        width: 160,
        height: 80,
        coordinate: [-442, -275],
        meta: {
          prop: "doing",
          name: "条件节点",
        },
      },
      {
        id: "nodeZBK0ZPpgMe1exezE",
        width: 160,
        height: 80,
        coordinate: [-200, -275],
        meta: {
          prop: "doing",
          name: "审批节点",
        },
      },
      {
        id: "nodeqkK9zjcDz53xKRlK",
        width: 160,
        height: 80,
        coordinate: [34, -209],
        meta: {
          prop: "cc",
          name: "抄送节点",
        },
      },
      {
        id: "nodeDhVU6w2KbEnJCjZs",
        width: 50,
        height: 50,
        coordinate: [393, -90],
        meta: {
          prop: "end",
          name: "结束",
        },
      },
      {
        id: "nodesyxisLH1hJDdPsxx",
        width: 160,
        height: 80,
        coordinate: [34, -2],
        meta: {
          prop: "cc",
          name: "抄送节点",
        },
      },
      {
        id: "node0aiA9VuhjkiAdZCs",
        width: 160,
        height: 80,
        coordinate: [-200, -2],
        meta: {
          prop: "doing",
          name: "审批节点",
        },
      },
      {
        id: "nodeG3WeFnzCI15X58Qw",
        width: 160,
        height: 80,
        coordinate: [-442, -2],
        meta: {
          prop: "doing",
          name: "条件节点",
        },
      },
      {
        id: "node7WXbwOR6kSFD53Hf",
        width: 160,
        height: 80,
        coordinate: [-442, -148],
        meta: {
          prop: "doing",
          name: "条件节点",
        },
      },
    ];
    const linkList = [
      {
        id: "linkcs9ZhumWeTHrtUy8",
        startId: "nodeS3WgFnzCI15X58Qw",
        endId: "nodeni9QOqT3mI7hsMau",
        startAt: [100, 40],
        endAt: [0, 40],
        meta: {
          desc: "大于1",
        },
      },
      {
        id: "linkBDld5rDBw4C6kiva",
        startId: "nodefHsy9uJObPtdHZv1",
        endId: "nodeqkK9zjcDz53xKRlK",
        startAt: [160, 40],
        endAt: [0, 40],
        meta: {
          desc: "大于2",
        },
      },
      {
        id: "linkA0ZZxRlDI9AOonuq",
        startId: "node7WXbwOR6kSFD53Hf",
        endId: "nodefHsy9uJObPtdHZv1",
        startAt: [160, 40],
        endAt: [0, 40],
        meta: null,
      },
      {
        id: "linkhCKTpRAf89gcujGS",
        startId: "nodeni9QOqT3mI7hsMau",
        endId: "nodeZBK0ZPpgMe1exezE",
        startAt: [160, 40],
        endAt: [0, 40],
        meta: null,
      },
      {
        id: "link2o7VZ7DRaSFKtB0g",
        startId: "nodeqkK9zjcDz53xKRlK",
        endId: "nodeDhVU6w2KbEnJCjZs",
        startAt: [160, 40],
        endAt: [0, 25],
        meta: null,
      },
      {
        id: "linkII013ovDctUDuPLu",
        startId: "nodeS3WgFnzCI15X58Qw",
        endId: "nodeG3WeFnzCI15X58Qw",
        startAt: [100, 40],
        endAt: [0, 40],
        meta: null,
      },
      {
        id: "link6MOmsq1EqzlWcG1n",
        startId: "nodeZBK0ZPpgMe1exezE",
        endId: "nodeqkK9zjcDz53xKRlK",
        startAt: [160, 40],
        endAt: [0, 40],
        meta: null,
      },
      {
        id: "link52SczSXHmuyKDzRU",
        startId: "nodesyxisLH1hJDdPsxx",
        endId: "nodeDhVU6w2KbEnJCjZs",
        startAt: [160, 40],
        endAt: [0, 25],
        meta: null,
      },
      {
        id: "link2hBQDTuIG4ZFYyE0",
        startId: "node0aiA9VuhjkiAdZCs",
        endId: "nodesyxisLH1hJDdPsxx",
        startAt: [160, 40],
        endAt: [0, 40],
        meta: null,
      },
      {
        id: "linkrwdW87FmOma5rPVo",
        startId: "nodeG3WeFnzCI15X58Qw",
        endId: "node0aiA9VuhjkiAdZCs",
        startAt: [160, 40],
        endAt: [0, 40],
        meta: null,
      },
      {
        id: "linknL75dQV0AWZA85sq",
        startId: "nodeS3WgFnzCI15X58Qw",
        endId: "node7WXbwOR6kSFD53Hf",
        startAt: [100, 40],
        endAt: [0, 40],
        meta: null,
      },
    ];

    setTimeout(() => {
      this.$refs.superFlow.nodeList = nodeList;
      this.$refs.superFlow.linkList = linkList;
    }, 100);
  },
  methods: {
    getHeight() {
      this.outHeight.height = windowHeight - 155 + "px";
      this.autoHeight.height = windowHeight - 155 + "px";
    },
    linkStyle(link) {
      console.log(JSON.stringify(link));
      return {
        hover: "blue",
        color: "#909399",
        textColor: "#909399",
        textHover: "#F56C6C",
        font: "12px Arial",
        dotted: false,
        lineDash: [4, 4],
        background: "rgba(255,255,255,0.6)",
      };
    },
  },
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
};
</script>

<style lang="less">
.super-flow-base-demo {
  width: 100%;
  margin: 0 auto;
}
.flow-container {
  padding: 10px;
  margin: -15px;
  background-color: #f5f5f5;
}
</style>
